<template>
	<view class="salesign-container">
		<fui-nav-bar title="签约" isFixed isOccupy  @leftClick="pageBack"></fui-nav-bar>
		<view class="">
			<view class="sign-header">
				<view class="u-flex u-col-center">
					<view>销售商</view>
					<view class="sign-header_text u-m-l-20">{{signInfo.distributorName}}</view>
				</view>
				<view class="u-flex u-col-center u-m-t-30" v-if="signInfo.introducerName">
					<view>业务员</view>
					<view class="sign-header_text u-m-l-20 u-flex u-col-center">
						<image :src="signInfo.introducerImage"  class="sign-header_image u-m-r-20"></image>
						<view>{{signInfo.introducerName}}</view>
					</view>
				</view>
			</view>
			<view class="sign-content u-p-35">
				<view class="u-font-32" style="font-weight: bold;">报价单</view>
				<view class="u-flex u-col-center u-m-t-20">
					<view class="iconfont icon-dingdanwancheng-" style="color: #ffbb1a;font-size: 38rpx;"></view>
					<view class="u-m-l-10">可签约报价单</view>
				</view>
				<view v-if="signInfo.signable.length!==0">
					<view class="template-price u-flex u-col-center u-row-between u-p-32" v-for="item in signInfo.signable" :key="item.id">
						<view style="flex:1;">
							<view class="t-p-title">{{item.name}}</view>
							<view class="t-p-content">{{item.profile}}</view>
							<view class="t-p-bot">共{{item.count}}个品</view>
						</view>
						<view class="t-p-btn" @click="$mRouter.push({route:'/pages/purchase/mySale/priceOrder?item='+JSON.stringify(item)+'&type='+1+'&introducerId='+signInfo.introducerId+'&distributorId='+signInfo.distributorId})">签约</view>
					</view>
				</view>
				<view v-else class="template-price u-p-32 u-text-center">
					没有可以签约的报价单~
				</view>
				
				<!-- <view class="u-flex u-col-center">
					<view class="iconfont icon-hezuo" style="color: #ffbb1a;font-size: 38rpx;"></view>
					<view class="u-m-l-10">线下签约报价单</view>
				</view>
				<view v-if="signInfo.applicable.length!==0">
					<view class="template-price u-flex u-col-center u-row-between u-p-32" v-for="item in signInfo.applicable" :key="item.id">
						<view style="flex:1;">
							<view class="t-p-title">{{item.name}}</view>
							<view class="t-p-content">{{item.profile}}</view>
							<view class="t-p-bot">共{{item.count}}个品</view>
						</view>
						<view class="t-p-btn" @click="$mRouter.push({route:'/pages/purchase/mySale/priceOrder?item='+JSON.stringify(item)+'&type='+2+'&introducerId='+signInfo.introducerId+'&distributorId='+signInfo.distributorId})">签约</view>
					</view>
				</view>
				<view v-else class="template-price u-p-32 u-text-center">
					没有可以签约的报价单~
				</view> -->
			</view>
		</view>
		<akLoading isFullScreen :active="loading"></akLoading>
		<fui-modal :show="errorShow" title="提示" maskClosable :descr="errorList[errorType]" @click="modalConfirm"></fui-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				timer:null,
				loading:false,
				signInfo:{
					signable:[],
					applicable:[],
				},
				qrcode:'',
				sellerId:'',
				errorShow:false,
				errorList:[
					'您已向该销售商提交过申请且申请处于保存状态，不可重复提交~',
					'您与该销售商已有生效的合约，不可重复签约~',
					'您已向该销售商提交过申请，不可重复提交~',
				],
				errorType:'',
			}
		},
		
		onLoad(options) {
			if(options.type === 'code'){
				this.qrcode = options.qrcode;
				this.getSignListByCodeFn();
			}else{
				this.sellerId = options.id;
				this.getSignListByIdFn();
			};
		},
		
		methods:{
			modalConfirm(e){
				if(e.index === 1){
					this.loadError('签约失败')
				}
				this.errorShow = false;
			},
			async getSignListByCodeFn(){
				this.loading = true;
				let params = {
					qrCode:this.qrcode
				};
				const res = await this.$newHttp.get('api/v1.2/Shop/GetSigningInfoByQrCodeData', { params: params } );
				this.loading = false;
				if(res.code === 200){
					this.signInfo = res.data;
					this.errorType = '';
				}else if(res.code === 50404){
					this.errorType = 0;
					this.errorShow = true;
				}else if(res.code === 50405){
					this.errorType = 1;
					this.errorShow = true;
				}else if(res.code === 50406){
					this.errorType = 2;
					this.errorShow = true;
				}else{
					this.loadError('获取签约详情失败，请重新加载');
				}
			},
			async getSignListByIdFn(){
				this.loading = true;
				let params = {
					sellerId:this.sellerId
				};
				const res = await this.$newHttp.get('api/v1.2/Shop/GetSigningInfoBySellerId', { params: params } );
				this.loading = false;
				if(res.code === 200){
					this.signInfo = res.data;
				}else{
					this.loadError('获取签约详情失败，请重新加载');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	.salesign-container{
		.sign-header{
			background-color: #ffbb1a;
			box-sizing: border-box;
			padding: 50rpx 65rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			.sign-header_text{
				font-weight: bold;
				font-size:32rpx;
			}
			.sign-header_image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
		.sign-content{
			.template-price{
				background-color: #fff;
				box-shadow: 0px 0px 18rpx 2rpx rgba(8,1,3,0.05);
				border-radius: 20rpx;
				margin: 20rpx 0;
				.t-p-title{
					font-weight: bold;
				}
				.t-p-content{
					color: #999;
					margin: 20rpx 0;
				}
				.t-p-btn{
					background-color: #ffbb1a;
					box-sizing: border-box;
					padding: 12rpx 32rpx;
					border-radius: 50rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>